import {Circle as CircleStyle, Fill, Icon, Stroke, Style, Text} from "ol/style";
import {v4 as uuidv4} from "uuid";

const pcsIcon = require('@/assets/images/map/alarm-icon.png')
export default {
  data() {
    return {
      selected: null,
      icons: {
        'default': pcsIcon,
        'pcs': pcsIcon,
      }
    }
  },
  mounted() {
  },
  methods: {
    isObject(value) {
      return Object.prototype.toString.call(value).toLowerCase() === '[object object]'
    },
    isArray(value) {
      return Object.prototype.toString.call(value).toLowerCase() === '[object array]'
    },
    guid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
        let r = Math.random() * 16 | 0;
        let v = c === 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
      });
    },
    // 创建要素点
    createPointFeature(item, options) {
      let pointFeature = this.gisIns.createPoint(item.lng || '', item.lat || '', {
        pointer: true,
        type: options?.type || 'point',
        data: {
          ...item,
          icon: this.icons[item.type]
        }
      })
      // 设置style
      pointFeature.setStyle(resolution => {
        return new Style({
          image: new Icon({
            anchor: [0.5, 0.5],
            anchorOrigin: 'bottom-right',
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            offsetOrigin: 'top-left',
            src: this.icons[item.type],
            scale: 1,
            offset: [0, 0]
          }),
          ...(options?.style || {})
        });
      })
      pointFeature.setId(`${item.id || this.guid()}`)
      return pointFeature
    },
    // 点位列表
    addPoints(lists = [], options) {
      let layerId = options.layerId || 'mapPointsLayer'
      let mapLayer = this.gisIns.getLayer(layerId)
      if (!mapLayer) {
        mapLayer = this.gisIns.createVector({zIndex: 108}, layerId)
      }
      let layerSource = mapLayer.getSource()
      // 清空该图层点位
      if (options.clear) {
        layerSource.clear()
      }

      // 生成点位集合
      let pointLists = lists.map((item, index) => {
        return this.createPointFeature(item, options)
      })
      // 添加到图层中
      this.gisIns.addIconArrFeatures(layerId, pointLists)

      if (options.cluster) {
        // 先隐藏，只显示显示聚合图层
        mapLayer.setVisible(false)
        // 添加聚合图层数据
        this.addClusterFeatures(pointLists, {
          targetId: layerId, // 聚合源图层id
          layerId: options.clusterLayerId  // 聚合图层id
        })
      }
    },
    /**
     * 添加一个点位
     * @param item 点位数据
     * @param options 其他配置
     * @param cbFunc 动画结束后的回调
     */
    addPoint(item, options, cbFunc) {
      let layerId = options.layerId || 'PointLayer'
      let PointLayer = this.gisIns.getLayer(layerId)
      if (!PointLayer) {
        PointLayer = this.gisIns.createVector({zIndex: 108}, layerId)
      }
      let layerSource = PointLayer.getSource()
      if (options.clear) {
        layerSource.clear()
      }
      let id = `point-${item.type || 'point'}-${item.id || this.guid()}`
      item.id = id
      if (id) {
        // 删除旧数据 id相同
        layerSource.forEachFeature(Feature => {
          if (Feature.getId() === id) {
            layerSource.removeFeature(Feature);
          }
        })
      }
      // 生成点位
      let markerFeature = this.createPointFeature(item, options)
      this.gisIns.addIconArrFeatures(layerId, [markerFeature])
      if (options.center) {
        this.toMapCenter(markerFeature.getGeometry().getCoordinates(), options.scaleZoom, {
          animateAfterFunc: () => {
            cbFunc && cbFunc(markerFeature)
          }
        })
      }
      return markerFeature
    },
    // 添加聚合图层数据
    addClusterFeatures(FeatureLists = [], options) {
      this.createMapAggregation(FeatureLists, {
        layerId: options.layerId || 'clusterSourceLayer',
        targetId: options.targetId
      })
    },
  }
}
